<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="__PLUGIN_TMPL__/admin/public/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="__PLUGIN_TMPL__/admin/public/plugin/tinymce/tinymce.min.js"></script>
    <script type="module">
        import Vue from 'vue';
        import Element from 'element-ui';
        import './element-variables.scss';

        Vue.use(Element)
    </script>
</head>
<body>
<div id="app" style="padding: 20px; padding-bottom: 0;">
    <el-form ref="form" :model="form" label-width="80px" style="width: 700px;margin: 0 auto">
        <volist name="form" id="item">
            <if condition="$item['type'] == 'text'">
                <el-form-item label="{$item.content}">
                    <el-input
                            type="text"
                            v-model="form['{$item.field}']"
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    >
                    </el-input>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'number'">
                <el-form-item label="{$item.content}">
                    <el-input
                            type="number"
                            v-model="form['{$item.field}']"
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    >
                    </el-input>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'select'">
                <el-form-item label="{$item.content}">
                    <el-select v-model="form['{$item.field}']"
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    <if condition="isset($item['multiple'])">
                        multiple="true"
                    </if>
                    >
                    <if condition="isset($item['placeholder'])">
                        <el-option
                                label="{$item.placeholder}"
                                :value="0"
                        >
                            {$item.placeholder}
                        </el-option>
                    </if>
                    <volist name="$item['options']" id="option">
                        <el-option
                                label="{$option['content']}"
                                value="{$option['value']}"
                        >
                        </el-option>
                    </volist>
                    </el-select>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'checkbox'">
                <el-form-item label="{$item.content}">
                    <el-checkbox-group v-model="form['{$item.field}']">
                        <volist name="$item['options']" id="option">
                            <el-checkbox
                                    label="{$option.value}"
                            >
                                {$option.content}
                            </el-checkbox>
                        </volist>
                    </el-checkbox-group>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'radio'">
                <el-form-item label="{$item.content}">
                    <el-radio-group v-model="form['{$item.field}']">
                        <volist name="$item['options']" id="option">
                            <el-radio label="{$option.value}">{$option.content}</el-radio>
                        </volist>
                    </el-radio-group>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'textarea'">
                <el-form-item label="{$item.content}">
                    <el-input
                            type="textarea"
                            v-model="form['{$item.field}']"
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    >
                    </el-input>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'date'">
                <el-form-item label="{$item.content}">
                    <el-date-picker
                            type="date"
                            v-model="form['{$item.field}']"
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    >
                    </el-date-picker>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'time'">
                <el-form-item label="{$item.content}">
                    <el-time-picker
                    <if condition="isset($item['placeholder'])">
                        placeholder="{$item.placeholder}"
                    </if>
                    v-model="form['{$item.field}']"
                    >
                    </el-time-picker>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'switch'">
                <el-form-item label="{$item.content}">
                    <el-switch v-model="form['{$item.field}']"></el-switch>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'transfer'">
                <el-form-item label="{$item.content}">
                    <el-transfer
                            filterable
                    <if condition="isset($item['titles'])">
                        :titles={$item.titles}
                    </if>
                    v-model="form['{$item.field}']"
                    :data={$item.options}
                    >
                    </el-transfer>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'upload'">
                <el-form-item label="{$item.content}">
                    <el-upload
                            id="upload_{$item['field']}"
                            class="upload-demo"
                            action="{:cmf_plugin_url('yongtai://Upload/OneImage')}"
                            :file-list="fileList"
                            list-type="picture"
                            :limit="{$item.number}"
                            data-number="{$item.number}"
                            :on-success="uploadSuccessCallback"
                            :on-remove="removeCallback"
                    >
                        <el-button size="small" type="primary">上传文件</el-button>
                        <if condition="isset($item['description'])">
                            <div slot="tip" class="el-upload__tip">{$item.description}</div>
                        </if>
                    </el-upload>
                </el-form-item>
            </if>

            <if condition="$item['type'] == 'richtext'">
                <el-form-item label="{$item.content}">
                    <div id="{$item['selector']}" data-field="{$item.field}">{$item.value}</div>
                </el-form-item>
            </if>
        </volist>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<volist name="form" id="item">
    <if condition="$item['type'] == 'richtext'">
        <script>
            tinymce.init({
                selector: "#{$item['selector']}",
                language: 'zh_CN',
                plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize',
                toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
                min_height: 400,
                fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
                toolbar_sticky: true,
                autosave_ask_before_unload: false,
                file_browser_callback_types: 'image',// file image media'
                images_upload_url: "{:cmf_plugin_url('yongtai://Upload/OneImage')}",
                // menubar: false,
            });
        </script>
    </if>
</volist>

<script>
    let uploads_fields = [];
    let thumb = "";
    let _thumb = "";
    <volist name="form" id="item">
        <if condition="$item['type'] == 'upload'">
            uploads_fields.push("{$item.field}");
            <if condition="isset($data['thumb'])">
                thumb = {:json_encode($data['thumb'])};
                _thumb = {:json_encode($data['_thumb'])};
            </if>
        </if>
    </volist>
</script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                form: {$form_data},
                fileList: []
            }
        },
        mounted() {
            <if condition="isset($data['thumb'])">
            this.fileList = [{name: "缩略图", url: thumb, _url: _thumb}];
            </if>
        },
        methods: {
            uploadSuccessCallback(res, file, fileList) {
                for (let i in uploads_fields) {
                    let field = uploads_fields[i];
                    let upload = document.getElementById("upload_" + field);
                    let number = upload.getAttribute("data-number");

                    if (parseInt(number) === 1) {
                        this.form[field] = res.url
                    } else {
                        this.form[field] = fileList.map(function (item) {
                            return item.response.url;
                        })
                    }
                }
            },
            removeCallback(file, fileList) {
                for (let i in uploads_fields) {
                    let field = uploads_fields[i];
                    let upload = document.getElementById("upload_" + field);
                    let number = upload.getAttribute("data-number");

                    if (parseInt(number) === 1) {
                        if (fileList.length > 0)
                            this.form[field] = fileList[0].response._url
                        else
                            this.form[field] = ""
                    } else {
                        this.form[field] = fileList.map(function (item) {
                            return item.response._url;
                        })
                    }
                }
            },
            onSubmit() {
                let name = "selector";
                if (document.getElementById(name)) {
                    let e = document.getElementById(name);
                    let field = e.getAttribute('data-field');
                    this.form[field] = tinymce.activeEditor.getContent();
                }
                let url = "{$url}";
                console.log('form_data:', this.form);
                <if condition="isset($data['id'])">
                if ({$data['id']}){
                    url += "?id="+"{$data.id}";
                }
                </if>
                axios.post(url, this.form).then(res => {
                    console.group();
                    console.warn(url);
                    console.info(res);
                    res = res.data;
                    console.groupEnd();
                    let type = "error";
                    if (res.code === 1) {
                        type = "success";
                    }
                    this.$message({
                        message: res.msg,
                        type: type,
                        duration: 1000,
                        onClose: function () {
                            if (res.code === 1) {
                                window.location.reload();
                            }
                        }
                    });
                });
            },
            openDialog: function (title, url, area = ['700px', '80%'], offset = ["10%", "10%"]) {
                let self = this;
                layui.use(['layer'], function () {
                    self.layer = layui.layer;
                    self.layer.open({
                        type: 2,
                        title: title,
                        offset: offset,
                        area: area,
                        content: url
                    });
                })
            }
        }
    })
</script>
</html>